<template>
    <div class="mainContent">
        <div class="search">
            <div class="left">
                <Tabs v-model="tabActiveName"  @on-click="setTabClick">
                    <TabPane :label="`待处理（${isCount>99?'99+':isCount}）`" name="0"></TabPane>
                    <TabPane :label="`已处理（${count>99?'99+':count}）`" name="1"></TabPane>
                </Tabs>
            </div>
            <div class="right">
                <DatePicker type="daterange" :options="options" :clearable="true" v-model="dateArr" v-if="inputShow" format="yyyy-MM-dd" placement="top" transfer  placeholder="请选择日期" style="width: 300px;" @on-change="getDateArr" ></DatePicker>
                <DatePicker type="daterange" format="yyyy-MM-dd" placement="top"  placeholder="请选择日期" v-if="inputShow" style="opacity:0;position: absolute;top:-9999px;width:1px;"></DatePicker>
                <el-button type="primary" size="small"  plain style="margin-left:20px" v-if="handleType" :disabled="warnIdList.length == 0 " @click="allhandle">批量处理</el-button>
            </div>
        </div>
        <div class="tabBox">
            <div class="boxList">
                <div  :class="['item' , machRuleType == -1 ? 'machRuleType' : '']" @click="warnActiveFn(-1)">
                    <div class="left">
                        <img src="../../assets/images/mach/warn/mach_yj.png" alt="">
                    </div>
                    <div class="right">
                        <div class="p">总报警次数</div>
                        <div class="p"><span class="num">{{warnNum}}</span> <span>次</span></div>
                    </div>
                </div>
                    <div :class="['item' , machRuleType == 101 ? 'machRuleType' : '']" @click="warnActiveFn(101)" >
                    <div class="left">
                        <img src="../../assets/images/mach/warn/mach_qy.png" alt="">
                    </div>
                    <div class="right">
                        <div class="p">出区域</div>
                        <div class="p"><span class="num">{{fenceWarnNum}}</span> <span>次</span></div>
                    </div>
                </div>
                    <div :class="['item' , machRuleType == 102 ? 'machRuleType' : '']" @click="warnActiveFn(102)">
                    <div class="left">
                        <img src="../../assets/images/mach/warn/mach_ly.png" alt="">
                    </div>
                    <div class="right">
                        <div class="p">偷漏油</div>
                        <div class="p"><span class="num">{{oilPosWarnNum}}</span> <span>次</span></div>
                    </div>
                </div>
                    <div :class="['item' , machRuleType == 107 ? 'machRuleType' : '']" @click="warnActiveFn(107)">
                    <div class="left">
                        <img src="../../assets/images/mach/warn/mach_cs.png" alt="">
                    </div>
                    <div class="right">
                        <div class="p">超速</div>
                        <div class="p"><span class="num">{{speedWarnNum}}</span> <span>次</span></div>
                    </div>
                </div>
                    <div :class="['item' , machRuleType == 104 ? 'machRuleType' : '']" @click="warnActiveFn(104)">
                    <div class="left">
                        <img src="../../assets/images/mach/warn/mach_ds.png" alt="">
                    </div>
                    <div class="right">
                        <div class="p">怠机</div>
                        <div class="p"><span class="num">{{idleWarnNum}}</span> <span>次</span></div>
                    </div>
                </div>
                    <div :class="['item' , machRuleType == 106 ? 'machRuleType' : '']" @click="warnActiveFn(106)">
                    <div class="left">
                        <img src="../../assets/images/mach/warn/mach_zp.png" alt="">
                    </div>
                    <div class="right">
                        <div class="p">工作</div>
                        <div class="p"><span class="num">{{workWarnNum}}</span> <span>次</span></div>
                    </div>
                </div>
                <div :class="['item' , machRuleType == 110 ? 'machRuleType' : '']" @click="warnActiveFn(110)">
                    <div class="left">
                        <img src="../../assets/images/mach/warn/mach_qx.png" alt="">
                    </div>
                    <div class="right">
                        <div class="p">倾斜</div>
                        <div class="p"><span class="num">{{rotationWarnNum}}</span> <span>次</span></div>
                    </div>
                </div>
                <div :class="['item' , machRuleType == 105 ? 'machRuleType' : '']" @click="warnActiveFn(105)">
                    <div class="left">
                        <img src="../../assets/images/mach/warn/mach_tj.png" alt="">
                    </div>
                    <div class="right">
                        <div class="p">停机</div>
                        <div class="p"><span class="num">{{stopWarnNum}}</span> <span>次</span></div>
                    </div>
                </div>
                <div :class="['item' , machRuleType == 109  ? 'machRuleType' : '']" @click="warnActiveFn(109)">
                    <div class="left">
                        <img src="../../assets/images/mach/warn/mach_gj.png" alt="">
                    </div>
                    <div class="right">
                        <div class="p">拆解硬件</div>
                        <div class="p"><span class="num">{{deviceWarnNum}}</span> <span>次</span></div>
                    </div>
                </div>
            </div>
            <div class="tableList">
                <el-table :data="list" :height="tableHeight" @row-click="getHandleDetails" :stripe="true" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" > </el-table-column>
                    <el-table-column prop="machCode" label="设备编号" align="center" ></el-table-column>
                    <el-table-column prop="machTypeName" label="设备类型" align="center"></el-table-column>
                    <el-table-column prop="ruleType" label="报警类型" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType == 101">出区域</span>
                            <span v-if="scope.row.ruleType == 102">偷漏油</span>
                            <span v-if="scope.row.ruleType == 103">电量</span>
                            <span v-if="scope.row.ruleType == 104">怠机</span>
                            <span v-if="scope.row.ruleType == 105">停机</span>
                            <span v-if="scope.row.ruleType == 106">工作</span>
                            <span v-if="scope.row.ruleType == 107">超速</span>
                            <span v-if="scope.row.ruleType == 109">拆解硬件</span>
                            <span v-if="scope.row.ruleType == 110">倾斜</span>
                        </template>
                    </el-table-column>
<!--                                <el-table-column label="操作手信息" width="150px" align="center">-->
<!--                                    <template slot-scope="scope">-->
<!--                                        <span v-for="(val, i) in scope.row.operEmpList" :key="i">-->
<!--                                            {{ val.operEmpName }}-->
<!--                                        </span>-->
<!--                                    </template>-->
<!--                                </el-table-column>-->
                    <el-table-column prop="triggerTime" label="报警时间"  align="center"></el-table-column>
                    <el-table-column prop="handleTime" label="处理时间" v-if="state == 1" align="center"></el-table-column>
                    <el-table-column prop="handleUserName" label="处理人" v-if="state == 1" align="center"></el-table-column>
                    <el-table-column fixed="right" label="操作"  align="center" v-if="state == 1">
                        <template slot-scope="scope">
                            <el-button v-if="state == 1" @catch.native.prevent="handle( scope.$index, list)" type="text" size="small" v-preventReClick="1500" style="color:#1891FF;">查看详情</el-button>
                        </template>
                    </el-table-column>
                        <el-table-column fixed="right" label="操作"  align="center" v-if="state == 0 && btnList.includes('mach/warn/record/manage')">
                        <template slot-scope="scope">
                            <el-button v-if="state == 0" @catch.native.prevent="handle( scope.$index, list)" type="text" size="small" v-preventReClick="1500" style="color:#1891FF;">处理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix"   >
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                </div>
            </div>
        </div>

        <Modal v-model="handleModal" width="800px" :mask-closable="false" :title="isAdd ? '报警信息处理' : '报警信息详情'" class-name="msgModal">
            <div class="msgBox">
                <div class="info">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>设备信息</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left">
                            <div class="list">
                                <div class="item">
                                    <span class="span">报警设备:</span>
                                    <span class="span">{{machTypeName }}/{{machModelName}}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span class="span">设备编号:</span>
                                    <span class="span">{{machCode }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item operatorList" >
                                    <span class="span" style="white-space:nowrap">操作手:</span>
                                    <span class="span" style="margin-left:50px;white-space:nowrap" v-for="(val, i) in operatorList" :key="i">{{ val.operEmpName }}/{{ val.phone }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警规则</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%">
                            <div class="list">
                                <div class="item">
                                    <span class="span">报警类型:</span>
                                    <span class="span" v-if="ruleType == 101">出区域</span>
                                    <span class="span" v-if="ruleType == 102">偷漏油</span>
                                    <span class="span" v-if="ruleType == 103">电量</span>
                                    <span class="span" v-if="ruleType == 104">怠机</span>
                                    <span class="span" v-if="ruleType == 105">停机</span>
                                    <span class="span" v-if="ruleType == 106">工作</span>
                                    <span class="span" v-if="ruleType == 107">超速</span>
                                    <span class="span" v-if="ruleType == 109">拆解硬件</span>
                                    <span class="span" v-if="ruleType == 110">倾斜</span>

                                </div>
                            </div>
                            <div class="list" style="width:100%">
                                <div class="item" style="width:100%">
                                    <span class="span">报警规则:</span>
                                    <el-button type="primary" @click="searchGps" size="small"  v-show="ruleType == 101" style="background:#1891FF;padding:5px 15px;border-radius:15px;"><span style="color:#fff;">点击查看区域范围</span></el-button>
                                    <span class="span" v-if="ruleType == 102">暂无</span>
                                    <span class="span" v-if="ruleType == 103">暂无</span>
                                    <span class="span" v-if="ruleType == 109">暂无</span>
                                    <span class="span" v-if="ruleType == 104">怠机时长>{{ruleValue}}分钟</span>
                                    <span class="span" v-if="ruleType == 105">停机时长>{{ruleValue}}分钟</span>
                                    <span class="span" v-if="ruleType == 106">工作时长>{{ruleValue}}分钟</span>
                                    <span class="span" v-if="ruleType == 107">行驶速度>{{ruleValue}}km/h</span>
                                    <p>
                                        <span class="span" v-if="ruleType == 110 && preRotationX > 0 ">前倾斜角度>{{preRotationX}}° </span>
                                        <span class="span" v-if="ruleType == 110 && postRotationX > 0 ">, 后倾斜角度>{{postRotationX}}° </span>
                                        <span class="span" v-if="ruleType == 110 && leftRotationZ > 0 ">, 左倾斜角度>{{leftRotationZ}}° </span>
                                        <span class="span" v-if="ruleType == 110 && rightRotationZ > 0 ">, 右倾斜角度>{{rightRotationZ}}° </span>
                                    </p>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item operatorList"  v-if="timeList.length>0">
                                    <span class="span">生效时间:</span>
                                    <span class="span" style="margin-right:20px;" v-for="(val, i) in timeList" :key="i">{{ val.startTime }}--{{ val.endTime }}</span>
                                </div>
                                <div class="item operatorList"  v-if="timeList.length==0">
                                    <span class="span">生效时间:</span>
                                    <span class="span">00:00--23:59</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警信息</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%;">
                            <div class="list">
                                <div class="item">
                                    <span class="span">报警时间:</span>
                                    <span class="span">{{triggerTime }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span class="span">报警地点:</span>
                                    <span class="span">{{ads }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item operatorList" style="align-items: flex-start;">
                                    <span class="span">报警详情:</span>
                                    <div v-show="ruleType == 101" style="width:600px;height:300px;border:1px solid #1891FF;">
                                        <div id="fenceMap2" class="fenceMap"></div>
                                    </div>
                                    <span class="span" v-if="ruleType == 102">暂无</span>
                                    <span class="span" v-if="ruleType == 103">暂无</span>
                                    <span class="span" v-if="ruleType == 109">{{triggerValue}}</span>
                                    <span class="span" v-if="ruleType == 104">怠机时长{{parseInt(triggerValue/60)}}分钟</span>
                                    <span class="span" v-if="ruleType == 105">停机时长{{parseInt(triggerValue/60)}}分钟</span>
                                    <span class="span" v-if="ruleType == 106">工作时长{{parseInt(triggerValue/60)}}分钟</span>
                                    <span class="span" v-if="ruleType == 107">行驶速度{{triggerValue}}km/h</span>
                                    <span class="span" v-if="ruleType == 110">{{triggerValue}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警处理</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%;">
                            <div class="list" v-if="!isAdd">
                                <div class="item">
                                    <span class="span">处理人:</span>
                                    <span class="span">{{handleUserName}}</span>
                                </div>
                            </div>
                            <div class="list" v-if="!isAdd">
                                <div class="item">
                                    <span class="span">处理时间:</span>
                                    <span class="span">{{handleTime}}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item" style="width:100%;">
                                    <i class="tip" v-if="isAdd">*</i>
                                    <span class="span" >报警原因:</span>
                                    <span class="span" style="width:500px;white-space:normal;word-wrap: break-word;" v-if="!isAdd">{{handleRemark}}</span>
                                </div>
                            </div>
                            <div class="list inputMsg" v-if="isAdd">
                                <div class="item" style="width:100%;">
                                    <el-input  v-model="handleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width:100%;margin:0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                            <div class="list" >
                                <div class="item" style="width:100%;">
                                    <i class="tip" v-if="isAdd">*</i>
                                    <span class="span" >处理结果:</span>
                                    <span class="span" style="width:500px;;white-space:normal;word-wrap: break-word;" v-if="!isAdd">{{handleResult}}</span>
                                </div>
                            </div>
                            <div class="list inputMsg" v-if="isAdd">
                                <div class="item" style="width:100%;">
                                    <el-input v-model="handleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 100%;margin: 0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(0)" style="padding:7px 25px;border-radius: 15px;" type="info" size="mini" v-if="isAdd">取消</el-button>
                <el-button @click="ok(0)" type="primary" style="padding:7px 25px;border-radius: 15px;" size="mini" v-if="isAdd" v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="Modal" title="报警信息处理" width="500px;" :mask-closable="false" class-name="msgModal">
            <p style="width:100%;text-align:center;font-size:16px;color:#1891FF;margin:20px auto;">
                处理消息一旦确认，就无法更改！
            </p>
            <div style="width:100%;text-align:center;font-size:16px;color:#1891FF;margin:20px auto;">
                您是否确认处理结果？
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" style="padding:7px 25px;border-radius: 15px;" type="info" size="mini">取消</el-button>
                <el-button @click="submit" type="primary"  style="padding:7px 25px;border-radius: 15px;" size="mini" v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="GPSModal" title="查看范围区域" width="1000px" :mask-closable="false" :footer-hide="true" class-name="msgModal">
            <div class="msg">
                <div style="width:900px;height:500px;margin:20px auto;border:1px solid #1891FF;">
                    <div id="container2" class="container"></div>
                </div>
            </div>
        </Modal>

        <Modal v-model="allhandleModal" width="800px" :mask-closable="false" title="批量处理" class-name="msgModal">
            <div class="msgBox">
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警处理</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%;">
                            <div class="list">
                                <div class="item" style="width:100%;">
                                    <i class="tip"  style="color:red">*</i>
                                    <span class="span" >报警原因:</span>
                                </div>
                            </div>
                            <div class="list inputMsg">
                                <div class="item" style="width:100%;">
                                    <el-input  v-model="allhandleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width:100%;margin:0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                            <div class="list" >
                                <div class="item" style="width:100%;">
                                    <i class="tip"  style="color:red">*</i>
                                    <span class="span" >处理结果:</span>
                                </div>
                            </div>
                            <div class="list inputMsg" >
                                <div class="item" style="width:100%;">
                                    <el-input v-model="allhandleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 100%;margin: 0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" style="padding:7px 25px;border-radius: 15px;" type="info" size="mini" >取消</el-button>
                <el-button @click="ok(1)" type="primary"  style="padding:7px 25px;border-radius: 15px;" size="mini" v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getMachRecordList_V1,
    getMachSarnNumStatic_V1,
    getMachRecordHandle_V1,
    getMachRecordDetail_V1,
    getMachRecordBatchHandle_V1
} from "@/api/mach.js";
import {initYMD} from "@/sever/utils";
export default {
    data() {
        return {
            dateArr:['',''],
            btnList:[],
            warnNum:0,
            fenceWarnNum:0,
            idleWarnNum:0,
            workWarnNum:0,
            stopWarnNum:0,
            speedWarnNum:0,
            deviceWarnNum:0,
            oilPosWarnNum:0,
            rotationWarnNum:0,
            tabActiveName:"0",
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            list: [],
            flag: true,
            state: 0,
            handleModal: false,
            inputShow: false,
            isAdd: false,
            // 报警详情信息
            handleRemark: "",
            handleResult: "",
            handleTime: "",
            handleUserName: "",
            machTypeName: "",
            machBrandName: "",
            machModelName: "",
            machCode: "",
            operatorList: [],
            ruleType: "",
            ruleValue: "",
            type: "",
            pointList: [],
            centerPoint: [],
            radius: "",
            timeList: [],
            triggerTime: "",
            triggerValue: "",
            ads: "",
            warnId: "",
            // ---
            Modal: false,
            count: 0,
            isCount: 0,
            deptId: "",
            GPSModal: false,
            ruleTypeList: [
                {
                    id: 101,
                    name: "出区域报警"
                },
                {
                    id: 102,
                    name: "偷漏油报警"
                },
                {
                    id: 104,
                    name: "怠机报警"
                },
                {
                    id: 105,
                    name: "停机报警"
                },
                {
                    id: 106,
                    name: "工作报警"
                },
                {
                    id: 107,
                    name: "超速报警"
                }
            ],
            machRuleType: -1,
            preRotationX:0,
            postRotationX:0,
            leftRotationZ:0,
            rightRotationZ:0,
            warnIdList:[],
            allhandleModal:false,
            allhandleRemark:"",
            allhandleResult:"",
            handleFlag:false,
            handleType:true,
            tableHeight: window.innerHeight - 505,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.state = 0;
                this.pageNum = 1;
                this.current = 1;
                this.machRuleType = -1;
                this.dateArr = ['',''];
                this.getAllList();
                this.initData();
                this.getMachSarnNumStaticFn();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getAllList();
        this.initData();
        this.getMachSarnNumStaticFn();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        setTimeout(()=>{
            this.inputShow = true;
        },1)
    },
    methods: {
        initData(){
            this.getIsCountFn();
            this.getCountFn();
        },
        //获取待整改
        getIsCountFn() {
            let parmas = {
                deptId: this.deptId,
                state: 0,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startDate: this.dateArr[0] ? initYMD(this.dateArr[0]) :'',
                endDate: this.dateArr[1] ? initYMD(this.dateArr[1]) :'',
            };
            getMachRecordList_V1(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.isCount = res.data.total;
                        if(this.state == 0 ){
                            this.totalCount = res.data.total;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取已整改
        getCountFn() {
            let parmas = {
                deptId: this.deptId,
                state: 1,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startDate: this.dateArr[0] ? initYMD(this.dateArr[0]) :'',
                endDate: this.dateArr[1] ? initYMD(this.dateArr[1]) :'',
            };
            getMachRecordList_V1(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.count = res.data.total;
                        if(this.state == 1 ){
                            this.totalCount = res.data.total;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        warnActiveFn(num){
            this.machRuleType = num;
            if(this.tabActiveName==='0'){
               this.gethandle();
            }else if(this.tabActiveName==="1"){
                this.getYhandle();
            }
        },
        setTabClick(name) {
            if(name==='0'){
               this.handleType = true;
               this.gethandle();
            }else if(name==="1"){
                this.handleType = false;
                this.getYhandle();
            }
            this.getMachSarnNumStaticFn();
        },
        getMachSarnNumStaticFn(){
             let parmas = {
                deptId: this.deptId,
                state: this.state,
                 startDate: this.dateArr[0] ? initYMD(this.dateArr[0]) :'',
                 endDate: this.dateArr[1] ? initYMD(this.dateArr[1]) :'',
            };
            getMachSarnNumStatic_V1(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.warnNum = res.data.warnNum || 0;
                        this.fenceWarnNum = res.data.fenceWarnNum || 0;
                        this.idleWarnNum = res.data.idleWarnNum || 0;
                        this.workWarnNum = res.data.workWarnNum || 0;
                        this.stopWarnNum = res.data.stopWarnNum || 0;
                        this.speedWarnNum = res.data.speedWarnNum || 0;
                        this.deviceWarnNum = res.data.deviceWarnNum || 0;
                        this.oilPosWarnNum = res.data.oilPosWarnNum || 0;
                        this.rotationWarnNum = res.data.rotationWarnNum || 0;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取列表
        getAllList() {
            this.totalCount = '';
            let parmas = {
                deptId: this.deptId,
                state: this.state,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ruleType: this.machRuleType == -1 ? ''  : this.machRuleType ,
                startDate: this.dateArr[0] ? initYMD(this.dateArr[0]) :'',
                endDate: this.dateArr[1] ? initYMD(this.dateArr[1]) :'',
            };
            getMachRecordList_V1(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getDateArr(i,v){
            this.dateArr = i;
            this.initData();
            this.getAllList();
            this.getMachSarnNumStaticFn();
        },
        clear() {
            this.machRuleType = "";
            this.pageNum = 1;
            this.current = 1;
            this.dateArr = ['',''];
            this.initData();
            this.getAllList();
            this.getMachSarnNumStaticFn();;
        },
        gethandle() {
            this.flag = true;
            this.list = [];
            this.state = 0;
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        getYhandle() {
            this.flag = false;
            this.list = [];
            this.state = 1;
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        getHandleDetails(row) {
            if(this.tabActiveName != 1){
                if(this.btnList.includes('mach/warn/record/manage')){
                    this.warnId = row.id;
                    this.getDetails(row.id);
                }
            }else{
                this.warnId = row.id;
                this.getDetails(row.id);
            }
        },
        handle(index, rows) {
            this.warnId = rows[index].id;
            this.getDetails(rows[index].id);
        },
        getDetails(id) {
            let parmas = {
                id: id
            };
            getMachRecordDetail_V1(parmas)
                .then(res => {
                    if (res.code == 200) {
                        if (res.data.handleState == 1) {
                            this.handleRemark = res.data.handleRemark;
                            this.handleResult = res.data.handleResult;
                            this.isAdd = false;
                        } else if (res.data.handleState == 0) {
                            this.handleRemark = "";
                            this.handleResult = "";
                            this.isAdd = true;
                        }
                        this.handleModal = true;
                        this.handleTime = res.data.handleTime;
                        this.handleUserName = res.data.handleUserName;
                        this.machTypeName = res.data.machTypeName;
                        this.machBrandName = res.data.machBrandName;
                        this.machModelName = res.data.machModelName;
                        this.machCode = res.data.machCode;
                        this.operatorList = res.data.operatorList;
                        this.ruleType = res.data.ruleType;
                        this.ruleValue = res.data.ruleValue
                        this.type = res.data.type;
                        this.pointList = res.data.pointList;
                        this.centerPoint = res.data.centerPoint;
                        this.radius = res.data.radius;
                        this.timeList = res.data.timeList;
                        this.triggerTime = res.data.triggerTime;
                        this.triggerValue = res.data.triggerValue || 0;
                        if(this.ruleType == 110){
                            this.preRotationX = res.data.machRotationRuleDTO.preRotationX || 0;
                            this.postRotationX = res.data.machRotationRuleDTO.postRotationX || 0;
                            this.leftRotationZ = res.data.machRotationRuleDTO.leftRotationZ || 0;
                            this.rightRotationZ = res.data.machRotationRuleDTO.rightRotationZ || 0;
                        }
                        var _that = this;
                        //电子围栏报警时报警详情
                        if (this.ruleType == 101) {
                            if (_that.type == 1) {
                                var polygonPointList = _that.pointList;
                                var a = [];
                                var b = [];
                                var path = [];
                                for (let i in polygonPointList) {
                                    a.push(polygonPointList[i].lat);
                                    b.push(polygonPointList[i].lng);
                                    //多边形的坐标点
                                    let x = [
                                        polygonPointList[i].lng,
                                        polygonPointList[i].lat
                                    ];
                                    path.push(x);
                                }
                                let latSum = 0;
                                for (let i in a) {
                                    latSum += a[i];
                                }
                                var lat = latSum / a.length;
                                let lngSum = 0;
                                for (let i in b) {
                                    lngSum += b[i];
                                }
                                var lng = lngSum / b.length;
                                var machpolygon = new AMap.Polygon({
                                    path: path,
                                    strokeColor: "#ff00ff",
                                    strokeWeight: 6,
                                    strokeOpacity: 0.2,
                                    fillOpacity: 0.4,
                                    fillColor: "#ff00ff",
                                    zIndex: 50
                                });
                                var machmap = new AMap.Map("fenceMap2", {
                                    zoom: 14,
                                    center: [lng, lat]
                                });
                            } else if (_that.type == 2) {
                                var lat = _that.centerPoint.lat;
                                var lng = _that.centerPoint.lng;
                                var radius = _that.radius;
                                var machcircle = new AMap.Circle({
                                    center: [lng, lat],
                                    radius: radius, //半径
                                    borderWeight: 3,
                                    strokeColor: "#ff00ff",
                                    strokeWeight: 6,
                                    strokeOpacity: 0.2,
                                    fillOpacity: 0.4,
                                    strokeStyle: "dashed",
                                    strokeDasharray: [10, 10],
                                    // 线样式还支持 'dashed'
                                    fillColor: "#ff00ff",
                                    zIndex: 50
                                });
                                var machmap = new AMap.Map("fenceMap2", {
                                    zoom: 14,
                                    center: [lng, lat]
                                });
                            }
                            //标记设备的区域
                            var marker;
                            marker = new AMap.Marker({
                                map: machmap,
                                icon: new AMap.Icon({
                                    image:  res.data.machTypeIcon,
                                    size: new AMap.Size(128, 128), //图标大小
                                    imageSize: new AMap.Size(64, 64)
                                }),
                                // icon:require("./../../assets/images/mach/warn/wjj_0.png"),
                                position: [res.data.lng, res.data.lat],
                                offset: new AMap.Pixel(-13, -30)
                            });
                            var mouseTool = new AMap.MouseTool(machmap);
                            // 构造官方卫星、路网图层
                            var satelliteLayer = new AMap.TileLayer.Satellite();
                            var roadNetLayer = new AMap.TileLayer.RoadNet();
                            //添加图层
                            machmap.add([satelliteLayer, roadNetLayer]);
                            if (_that.type == 1) {
                                machmap.add(machpolygon);
                                // 缩放地图到合适的视野级别
                                machmap.setFitView([machpolygon]);
                            } else if (_that.type == 2) {
                                // circle.setMap(map);
                                machmap.add(machcircle);
                                // 缩放地图到合适的视野级别
                                machmap.setFitView([machcircle]);
                            }
                        }
                        // 经纬度转坐标
                        AMap.service("AMap.Geocoder", function() {
                            //回调函数
                            //实例化Geocoder
                            var geocoder = new AMap.Geocoder({
                                city: "", //城市，默认:“全国”
                                radius: 1000,
                                extensions: "all"
                            });
                            var lnglatXY = [res.data.lng, res.data.lat]; //地图上所标点的坐标
                            // var lnglatXY = [114.29484, 30.592335]; //地图上所标点的坐标
                            geocoder.getAddress(lnglatXY, function( status, result) {
                                if ( status === "complete" && result.info === "OK") {
                                    //获得了有效的地址信息:
                                    //即，result.regeocode.formattedAddress
                                    var city =
                                        result.regeocode.formattedAddress;
                                } else {
                                    var city = "暂无位置信息";
                                    //获取地址失败
                                }
                                _that.ads = city;
                            });
                        });
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //电子围栏报警区域
        searchGps() {
            var _that = this;
            _that.GPSModal = true;
            if (_that.type == 1) {
                var polygonPointList = _that.pointList;
                var a = [];
                var b = [];
                var path = [];
                for (let i in polygonPointList) {
                    a.push(polygonPointList[i].lat);
                    b.push(polygonPointList[i].lng);
                    //多边形的坐标点
                    let x = [polygonPointList[i].lng, polygonPointList[i].lat];
                    path.push(x);
                }
                let latSum = 0;
                for (let i in a) {
                    latSum += a[i];
                }
                var lat = latSum / a.length;
                let lngSum = 0;
                for (let i in b) {
                    lngSum += b[i];
                }
                var lng = lngSum / b.length;
                var polygon = new AMap.Polygon({
                    path: path,
                    strokeColor: "#ff00ff",
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    fillColor: "#ff00ff",
                    zIndex: 50
                });
                var map = new AMap.Map("container2", {
                    zoom: 14,
                    center: [lng, lat]
                });
            } else if (_that.type == 2) {
                var lat = _that.centerPoint.lat;
                var lng = _that.centerPoint.lng;
                var radius = _that.radius;
                var circle = new AMap.Circle({
                    center: [lng, lat],
                    radius: radius, //半径
                    borderWeight: 3,
                    strokeColor: "#ff00ff",
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    strokeStyle: "dashed",
                    strokeDasharray: [10, 10],
                    // 线样式还支持 'dashed'
                    fillColor: "#ff00ff",
                    zIndex: 50
                });
                var map = new AMap.Map("container2", {
                    zoom: 14,
                    center: [lng, lat]
                });
            }
            var mouseTool = new AMap.MouseTool(map);
            // 构造官方卫星、路网图层
            var satelliteLayer = new AMap.TileLayer.Satellite();
            var roadNetLayer = new AMap.TileLayer.RoadNet();
            //添加图层
            map.add([satelliteLayer, roadNetLayer]);
            if (_that.type == 1) {
                map.add(polygon);
                // 缩放地图到合适的视野级别
                map.setFitView([polygon]);
            } else if (_that.type == 2) {
                // circle.setMap(map);
                map.add(circle);
                // 缩放地图到合适的视野级别
                map.setFitView([circle]);
            }
        },
        ok(type) {
            if(type == 0) {
                if (this.handleRemark == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写报警原因"
                    });
                    return;
                }
                if (this.handleResult == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写处理结果"
                    });
                    return;
                }
                this.handleFlag = false;
            } else if (type == 1) {
                if (this.allhandleRemark == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写报警原因"
                    });
                    return;
                }
                if (this.allhandleResult == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写处理结果"
                    });
                    return;
                }
                this.handleFlag = true;
            }
            this.Modal = true;
        },
        submit() {
            if(!this.handleFlag) {
                let parmas = {
                    warnId: this.warnId,
                    handleResult: this.handleResult,
                    handleRemark: this.handleRemark
                };
                getMachRecordHandle_V1(parmas)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.pageNum = 1;
                            this.current = 1;
                            this.initData();
                            this.getAllList();
                            this.getMachSarnNumStaticFn();
                            this.handleModal = false;
                            this.Modal = false;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else {
                let parmas = {
                    warnIdList: this.warnIdList,
                    handleResult: this.allhandleResult,
                    handleRemark: this.allhandleRemark
                };
                getMachRecordBatchHandle_V1(parmas)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.pageNum = 1;
                            this.current = 1;
                            this.initData();
                            this.getAllList();
                            this.getMachSarnNumStaticFn();
                            this.allhandleModal = false;
                            this.Modal = false;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        cancel(type) {
            if (type == 0) {
                this.handleModal = false;
            }  else if (type == 1) {
                this.Modal = false;
            }  else if (type == 3) {
                this.allhandleModal = false;
            }
        },
        handleSelectionChange(val){
            this.warnIdList =[];
            val.forEach(i=>{
                this.warnIdList.push(i.id)
            })
        },
        allhandle(){
            this.allhandleResult = "",
            this.allhandleRemark = "";
            this.allhandleModal = true;
        }
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style scoped lang="scss">
// @import "./../../assets/style/mach/mainContent.scss";
@import "./../../assets/style/mach/msgModal.scss";
.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #F5F5F5;
    .search {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        background:#fff;
        padding: 10px;
        box-sizing: border-box;
        &.searchBox{
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 0 20px 15px;
            .list{
                margin-right: 50px;
                span{
                    &:first-of-type{
                        color: #373D41;
                        font-family: MicrosoftYaHeiLight;
                    }
                }

            }
        }
        .left{
            width: 50%;
            /deep/ .ivu-tabs-bar{
                width: 100%;
                margin: 0 auto;
                border: none;
            }
            /deep/ .ivu-tabs-tab{
                padding-bottom: 20px;
                box-sizing: border-box;
            }
        }
        .right{
            margin-top: -20px;
        }
        .list{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 20px;
            margin-top: 20px;
            span{
                width: 100px;
                text-align: right;
            }
            .ulbox1{
                list-style: none;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 20px;
                .libox1{
                    width: 50px;
                    height: 32px;
                    text-align: center;
                    line-height: 32px;
                    color: var(--themeColor);
                    cursor: pointer;
                    border: 1px solid var(--themeColor);
                }
                li:first-child{
                    border-radius: 16px 0  0 16px;
                }
                li:last-child{
                    border-radius: 0 16px  16px 0;
                }
                .active{
                    background: var(--themeColor);
                    color: #fff;
                    border: none;
                }
            }
        }
    }
    .tabBox{
        width:100%;
        margin-top: 10px;
        background-color: #fff;
        border-radius: 10px;
        padding-bottom: 20px;
        box-sizing: border-box;
        .boxList{
            width: 100%;
            display: flex;
            height: 100%;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            .item{
                    width: 160px;
                    height: 80px;
                    background: #FCFDFF;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border: 1px solid var(--themeColor);
                    padding: 30px 10px;
                    box-sizing: border-box;
                    cursor: pointer;
                    &:hover {
                        transform: scale( 1.05);
                        transition: all 1s;
                        box-shadow: 0 4px 8px rgba(46,104,253,.12);
                    }
                    &.machRuleType{
                        background-color: #eee;
                        color: #fff;
                    }
                .left{
                    width: 50px;
                    height: 50px;
                    margin-right: 10px;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                .right{
                        flex: 1;
                    .p{
                        width: 80px;
                        font-weight: 500;
                        letter-spacing: 2px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #181818;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        &:last-of-type{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        }
                        .num{
                            font-size: 24px;
                        }
                    }
                }

            }
        }
        .tableList{
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            /deep/ .el-table{
                color: #181818;
                font-family: MicrosoftYaHei;
                font-size: 14px;
                td,
                th.is-leaf{
                    border-bottom: none;
                }
                tr{
                    border: none;
                }
                thead th{
                    color: #666666;
                    font-weight: 400;
                }
            }
            /deep/ .el-table__row{
                background-color: #fff;
                cursor: pointer;
            }
            /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td{
                background-color: #F3F6FD ;
                cursor: pointer;
            }
        }
    }
}
.radiusBorder{
    >>>.ivu-input{
        border-radius: 16px 0 0 16px;
        background: #EBF2F8;
        border-color:#EBF2F8 ;
    }
}
>>>.ivu-input-search{
    border-radius: 0 16px 16px 0;
}
#container2 {
    height: 100%;
}
#fenceMap2 {
    height: 100%;
}
</style>
